<template>
	<view class="uni_box home">
		<image class="bghome" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" />
		<navbar :invite_code="invite_code" :isback="true" title='报名详情' :backgroundColor='backgroundColor'>
		</navbar>
		<view class="content">
			<view class="lc">
				<text class="bq">1</text>
				<text class="bqname">电话报名</text>
				<image class="icon-xyb" src="@/pages_client/static/img/icon-xyb.png" mode="" />
				<text class="bq">2</text>
				<text class="bqname">接单确认</text>
				<image class="icon-xyb" src="@/pages_client/static/img/icon-xyb.png" mode="" />
				<text class="bq">3</text>
				<text class="bqname">上下班打卡</text>
				<image class="icon-xyb" src="@/pages_client/static/img/icon-xyb.png" mode="" />
				<text class="bq">4</text>
				<text class="bqname">结算提现</text>
			</view>
			<view class="tieone">
				<text class="tname">{{ info.title }}</text>
				<view class="bqitem">
					<view class="bqitem">
						<view class="sc lv" v-if="info.insuranceist >= 1">
							保险
						</view>
						<view class="sc" :class="ind == 0 ? 'chengse' : ''" v-if="info.tags" v-for="(i, ind) in info.tags"
							:key="ind">
							{{ i }}
						</view>
					</view>
				</view>
				<view class="bm">
					<text class="bmleft" :class="info.settlement==2?'lvtxt':''">{{ info.price || 0 }}<text class="danwei" :class="info.settlement==2?'lvtxt':''">{{info.settlement==1?'元/小时':'元/件' }}</text></text>
					<text class="yugu" v-if="info.settlement==1">预估赚 ¥<text class="yuprice">{{getzhneg(info.price*info.work_hour)}}</text></text>
				</view>
				<view class="ywxian" v-if="info.insuranceist >= 1">
					<image class="icON_bz" src="@/pages_client/static/img/icON_bz.png" />
					<text class="jianame">已加入 用工意外保障</text>
					<text class="jianame ml">{{ info.insuranceist_name }}</text>
					<image class="icon_lvnext" src="@/pages_client/static/img/icon_lvnext.png" />
				</view>
			</view>
			<view class="titwo">
				<text class="gname">工作要求</text>
				<view class="renlist">
					<text class="rentit">开始日期</text>
					<text class="renval">{{ info.starttime }}</text>
				</view>
				<view class="renlist">
					<text class="rentit">结束时间</text>
					<view class="rval">
						<text class="renval">{{ info.endtime }}</text>
						<view class="sm" v-if="info.cha">
							距离开工 <u-count-down :timestamp="info.cha" bg-color="transparent" separator-color="#EA5918" font-size="25" color="#EA5918" separator="zh"></u-count-down>
						</view>
					</view>

				</view>
				<view class="renlist">
					<text class="rentit">已接单数</text>
					<text class="renval">{{ info.count }}/{{ info.people }}</text>
				</view>
				<!-- <view class="renlist">
					<text class="rentit">性别</text>
					<text class="renval">{{ info.label[1] }}</text>
				</view>
				<view class="renlist">
					<text class="rentit">年龄</text>
					<text class="renval">{{ info.label[2] }}</text>
				</view> -->
				<view class="renlist" v-if="info.benefit">
					<text class="rentit">福利</text>
					<view class="fuview">
						<text class="fuli" v-for="(item,index) in getfu(info.benefit)">{{ item }}</text>
					</view>
				</view>
				<view class="renlist" v-if="info.minimum&&info.minimum!=0">
					<text class="rentit">保底工价</text>
					<text class="renval lv">{{ info.minimum+'元/时' }}</text>
				</view>
				
				<view class="renlist">
					<text class="rentit">信用分要求</text>
					<text class="renval lv">不低于{{ info.credit }}分，当前信用分{{ info.user_credit }}</text>
				</view>
				
			</view>
			<view class="titwo">
				<text class="gname">工作信息</text>
				<view class="bm">
					<text class="zfabu">招工发布人</text>
					<image class="img_tx" :src="info.boss.avatar ? ossThree(info.boss.avatar) : '/static/img/img_tx.png'" />
					<text class="xm">{{ info.boss.name }}</text>
					<text class="xb">男</text>
				</view>
				<view class="hpl">
					<view class="plitem">
						<text class="pnum">{{ info.boss.good_rate }}%</text>
						<text class="pname">好评率</text>
					</view>
					<view class="plitem">
						<text class="pnum">{{ info.boss.completed_order_count }}</text>
						<text class="pname">完单数</text>
					</view>
					<view class="plitem">
						<text class="pnum">{{ info.boss.tiam24 }}%</text>
						<text class="pname">24小时结算</text>
					</view>
				</view>
				<view class="renlist" v-if="info.describe">
					<text class="rentit">任务要求</text>
					<text class="renval">{{ info.describe }}</text>
				</view>
				<view class="renlist flex-col" v-if="info.address">
					<text class="rentit">招工地点</text>
					<view class="dizhi" @click="getadress">
						<image class="dizhiicon" src="@/pages_client/static/img/dizhi.png" mode="" />
						<view class="diitem">
							<view class="dileft">
								<text class="diname txt" v-if="info.task_order_id>0">{{ info.address+info.address_name }}</text>
								<text class="diname txt" v-else>{{ info.address}}</text>
								<text class="dimiao txt"> 距当前位置约{{ info.distance }}</text>
							</view>
							<view class="chadi">
								<image class="icon_dw" src="@/pages_client/static/img/icon_dw.png" mode="" />
								<text>查看地图</text>
							</view>
						</view>
					</view>
					
				</view>
				<text class="ditishi">*接单后可查看详细门牌号</text>
				<view class="renlist flex-col" v-if="info.images">
					<text class="rentit">招工图片</text>
					<image
						:src="ossThree(info.images)"
						mode="widthFix"
						@click="getyulan(info.images)"
						style="width: 100%;margin-top: 30rpx;"

					/>
					
				</view>
				<view class="renlist flex-col" v-if="info.video">
					<text class="rentit">招工视频</text>
					<!-- <video
					    :playsinline="true"
						:src="info.video"
						mode="widthFix"
						style="width: 100%;height: 400rpx;margin-top: 30rpx;"
					>
					</video> -->
					<video id="myVideo" style="width: 100%;height: 400rpx;margin-top: 30rpx;" :src="ossThree(info.video)"
                    ></video>
					
				</view>
				

			</view>
			<view class="titwo">
				<view class="anquan">
					<image class="icon_aq" src="@/pages_client/static/img/icon_aq.png" mode="" />
					<text class="gnamenew">安全信息</text>
					<text class="jubao ml" @click="getjubao">举报</text>
					<image class="icon_nexthui" @click="getjubao" src="@/pages_client/static/img/icon_nexthui.png" mode="" />
				</view>
				<text class="tishi">该信息由用户发布，如遇虚假招聘、诈骗、传销等违规行该信息由用户发布，如遇虚假招聘、诈骗、传销等违规行</text>
			</view>
		</view>
		<view class="newbot" v-if="info.uid != 0">
			<view class="wenxin" v-if="info.user_mobile && !info.baoming_id">
				<view class="wentit">温馨提示</view>
				<view class="tiwen">
					<text>1.请用{{ info.user_mobile }}拨打电话后，回牛牛日结完成接单</text>
					<text>2.禁止交换电话和微信，违者封号处理！</text>
				</view>
			</view>
			<view class="wenxin" v-if="info.baoming_id&&info.task_order_id!=0">
				<view class="wentit">温馨提示</view>
				<view class="tiwen">
					<text class="xy">已签署<text class="xyhu" style="color: red;" @click.stop="navrouter('/pages/my/yhXieyi?key=lhygxy&id='+this.info.id)">《灵活用工协议》</text></text>
				</view>
			</view>
			<!-- <view class="yuedu" v-if="info.baoming_id&&info.task_order_id==0" @click.stop="check=!check">
				<image class="icon_xz_n" v-if="!check" src="@/pages_client/static/img/icon_xz_n.png" mode="" />
				<image class="icon_xz_n" v-if="check" src="@/pages_client/static/img/icon_xz_s.png" mode="" />

				<text class="xy">我已阅读并同意<text class="xyhu">《劳务服务协议》</text>及<text class="xyhu">《个人意外险投保告知书》</text></text>
			</view> -->
			<view class="botview">
				<view class="botleft" @click="gethome">
					<image class="icon_fenxiang" src="@/pages_client/static/img/icon_sy.png" mode="" />
					<text>首页</text>
				</view>
				<view class="botleft" v-if="!info.baoming_id">
					<view class="fenview">
						<image class="icon_fenxiang" src="@/pages_client/static/img/icon_fx.png" mode="" />
						<text>分享</text>
					</view>
					<button open-type="share" class="btn"></button>
				</view>
				<view class="botleft" @click="getphonetwo" v-if="info.baoming_id">
					<image class="icon_fenxiang" src="@/pages_client/static/img/icon_ddh.png" mode="" />
					<text>打电话</text>
				</view>
				<view class="lianxi" @click="getphone" v-if="!info.baoming_id">
					<text class="lname">电话报名</text>
					<text class="lmiao"
						v-if="Number(info.people) - Number(info.count)">剩余{{ Number(info.people) - Number(info.count) }}个名额</text>
				</view>
				<view class="liantwo" v-if="info.baoming_id&&info.task_order_id==0">
					<view class="qubtn" @click="end">
						取消  <u-count-down :show-hours="false" :timestamp="info.cancle_baoming_cha" @end="end"></u-count-down>
					</view>
					<view class="qubtn queren" @click="getjiedan">
						确认接单
					</view>
				</view>
				<view class="lianxi" @click="getorder" v-if="info.baoming_id&&info.task_order_id!=0">
					<text class="lname">查看订单</text>
				</view>
			</view>
		</view>

		<!-- 拨打电话弹窗 -->
		<TelephonePop :phoneshow="phoneshow" @closephone="closephone" :chakan="chakan" :info="info" @getphonesucess="getphonesucess"></TelephonePop>
		<!-- 确认接单弹窗 -->
		<ConfirmOrderPop :ordershow="ordershow" @closeorder="closeorder" @getqueren="getqueren" ></ConfirmOrderPop>
		<!-- 接单弹窗集合 1确认开工 2开工码 3实名打卡 4已开工  -->
		<!-- <OrderPop :orderjiheshow="orderjiheshow" :orderjihestatus="orderjihestatus" @closeorderjihe="orderjiheshow = false">
		</OrderPop> -->
		<!-- 登陆 -->
		 <nsLogin :loginshow="loginshow" lei="2" :invite_code="invite_code" @saveUserInfo="saveUserInfo"></nsLogin>

		 
</view>
</template>

<script>
import TelephonePop from '@/pages_client/components/TelephonePop/TelephonePop'
import ConfirmOrderPop from '@/pages_client/components/ConfirmOrderPop/ConfirmOrderPop'
// import OrderPop from '@/pages_client/components/OrderPop/OrderPop'
import nsLogin from '@/components/ns-login/ns-login'
export default {
	components: {
		TelephonePop,
		ConfirmOrderPop,
		// OrderPop,
		nsLogin
	},
	data() {
		return {
			swlist: [{
				image: '/static/banner.png',
			},
			{
				image: '/static/banner.png',
			},
			{
				image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
			}
			],
			tablist: [{
				name: '商品详情'
			}, {
				name: '视频'
			}, {
				name: '交易规则'
			}],
			current: 0,
			backgroundColor: 'none',
			phoneshow: false,
			ordershow: false,
			orderjiheshow: false,//接单弹窗合集
			orderjihestatus: 4,//1确认开工 2开工码 3实名打卡 4已开工
			id: '37',
			latitude: '',
			longitude: '',
			info: {
				status: 0,//status 0 1 2 3 4 初始 1报名了 2接单了 3施工中 4取消
				boss:{
					avatar:''
				}
			},
			baoming_id:'',
			chakan:false,
			invite_code:'',
			loginshow:false,
			user:{},
			check:true,
		}
	},
	onLoad(option) {
		if (option.id) {
			this.id = option.id
		}
		if (option.latitude) {
			this.latitude = option.latitude
		}
		if (option.longitude) {
			this.longitude = option.longitude
		}
		if(option.invite_code){
			this.invite_code = option.invite_code //分享进入
			// this.getlogin();
		}
		// console.log(this.$store.state.code||uni.getStorageSync('code'))
		
		if(!uni.getStorageSync('token')){
			//弹出登陆
			// #ifdef MP-WEIXIN
			this.getLogin()
			// #endif
		}
	},
	onShareAppMessage(res) {
		if (res.from === 'button') { // 来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: this.info.title,
			// imageUrl:
			path: '/pages_client/twoPage/Detail?id='+this.id+'&invite_code='+this.$store.state.code||uni.getStorageSync('code')
		}
	},
	onShareTimeline(){
		return {
			title: this.info.title,
			// imageUrl:
			path: '/pages_client/twoPage/Detail?id='+this.id+'&invite_code='+this.$store.state.code||uni.getStorageSync('code')
		}
	},
	onShow() {
		this.getDetail()
	},
	methods: {
		getyulan(e){
			uni.previewImage({
				current: e, // 当前显示图片的 http 链接
				urls: [e] // 需要预览的图片 http 链接列表
			});
		},
		async getLogin(){
			this.loginshow = true
			// uni.login({
			// 	provider: 'weixin',
			// 	timeout: 3000,
			// 	success: res => {
			// 		console.log(res)
			// 		this.loginshow = true
			// 		if (res.code) {
			// 			this.getLogintwo(res.code)
			// 		}
			// 	},
			// 	fail: () => {
			// 		uni.$u.toast("请求失败")
			// 	}
			// })
		},
		saveUserInfo(e){
			this.loginshow = false
			this.getDetail()
		},
		
		async getDetail() {
			let res = await this.$u.api.getBaomingInfo({
				task_id: this.id,
				lat: this.latitude,
				lng: this.longitude
			});
			// console.log(res)
			this.info = res
			if(res.baoming_id){
				this.baoming_id = res.baoming_id
			}
			if(res.cancle_baoming_cha == 0){
				this.end()
			}
			if(uni.getStorageSync('token')){
				this.getuser()
			}
		},
		async getuser(){
			let res = await this.$u.api.user({
			});
			this.user = res.data

		},
		change(index) {
			this.current = index;
		},
		confrimOrderSucess() {
			this.navrouter("/pages_client/twoPage/OrderSucess");
		},
		getjubao(){
			this.navrouter("/pages_client/twoPage/Jubao?id="+this.id);
		},
		getorder(){
			uni.switchTab({ url: '/pages/tabbar/ClientOrder',animationType:'slide-in-right' })
		},
		getadress() {
			let that = this
			if(that.info.task_order_id>0){
				uni.openLocation({
					latitude: Number(that.info.lat),
					longitude: Number(that.info.lng),
					name: that.info.address_name,
					address: that.info.address,
					scale: 18,
					success(res) {
						console.log('打开地图成功');
					},
					fail(err) {
						console.error('打开地图失败', err);
					}
				});
			}else{
				uni.openLocation({
					latitude: Number(that.info.lat),
					longitude: Number(that.info.lng),
					name: that.info.address,
					address: that.info.address,
					scale: 18,
					success(res) {
						console.log('打开地图成功');
					},
					fail(err) {
						console.error('打开地图失败', err);
					}
				});
			}
			
		},
		gethome(){
			uni.switchTab({ url: '/pages/tabbar/ClientHome',animationType:'slide-in-right' })
		},
		getshiming(){
			this.navrouter("/pages/TPage/ShiMing");
		},
		async getphone(){
			if(!this.user.realname){
				this.$u.toast("请先实名认证");
				let that = this
				setTimeout(() => {
					that.getshiming()
				}, 1500);
				return;
			}
			let res = await this.$u.api.addBaoming({
				task_id:this.id
			});
			this.baoming_id = res.baoming_id
			

			// this.getphonesuccesstwo()

			if(res.is_check == 0){
				//需要电话
				this.$u.toast("请先拨打电话和老板沟通");
				// this.phoneshow = true
				this.getphonesuccesstwo()
			}else{
				this.getphonesuccesstwo()
			}
			
		},
		async end(){
			console.log("倒计时结束")
			let res = await this.$u.api.cancelBaoming({
				baoming_id:this.info.baoming_id
			});
			this.$u.toast('取消成功');
			this.getDetail()
		},
		getphonetwo(){
			this.chakan = true
			this.phoneshow = true
		},
		getphonesucess(){
			//拨打电话成功
			this.getphonesuccess()
			
		},
		async getphonesuccess(){
			//报名 （完成检测）
			let res = await this.$u.api.checkBaoming({
				baoming_id:this.baoming_id
			});
			this.closephone()
			this.getDetail()
		},
		async getphonesuccesstwo(){
			//报名 （完成检测）
			let res = await this.$u.api.checkBaoming({
				baoming_id:this.baoming_id
			});
			this.getDetail()
			let that = this
			setTimeout(() => {
                uni.makePhoneCall({
					phoneNumber: this.info.boss.mobile, //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！")
                        // 请求接口 报名成功
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
			}, 1000);
		},
		closephone(){
			this.phoneshow = false
		},
		async getjiedan(){
			this.ordershow = true
			// let res = await this.$u.api.jieaddOrder({
			// 	task_id:this.id
			// });

			// this.confrimOrderSucess()
		},
		async getqueren(){
			let res = await this.$u.api.jieaddOrder({
				task_id:this.id
			});
			this.closeorder()
			this.confrimOrderSucess()
		},
		closeorder(){
			this.ordershow = false
		},
		getfu(e){
			let data = e.split(',')
			return data;
		},
		getzhneg(e){
			return e.toFixed(0)
		},
		
	},
	onPageScroll(e) {
		// console.log('页面滚动距离:', e.scrollTop);
		// 在这里编写滚动相关的逻辑
		if (e.scrollTop >= 200) {
			this.backgroundColor = '#ffffff'
		} else {
			this.backgroundColor = 'none'
		}
		this.$forceUpdate()
	},

}
</script>

<style lang="scss" scoped>
page {
	background-color: #F5F5F5;
}

.bghome {
	width: 100%;
	position: absolute;
	top: 0;
	height: 550rpx;

}

.content {
	// background-color: #fff;
	padding-bottom: 300rpx;
	position: relative;

	.lc {
		margin: 20rpx 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		.bq {
			width: 28rpx;
			height: 28rpx;
			background: linear-gradient(90deg, #FF8F39, #FF4D43);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 800;
			font-size: 22rpx;
			color: #FFEFE9;
			margin-right: 5rpx;
		}

		.bqname {
			font-weight: 500;
			font-size: 24rpx;
			color: #EA5918;
			display: inline-block;
			margin-right: 5rpx;
			white-space: nowrap;
		}

		.icon-xyb {
			width: 42rpx;
			height: 31rpx;
			margin-right: 9rpx;
		}
	}

	.tieone {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		margin: 24rpx 30rpx 0;

		.tname {
			font-weight: 800;
			font-size: 40rpx;
			color: #111111;
		}

		.bqitem {
			margin: 20rpx 0;
		}

		.sc {
			display: flex;
			padding: 4rpx 20rpx;
			flex-direction: row;
			align-items: center;
			border-radius: 6rpx;
			font-weight: 500;
			font-size: 24rpx;
			margin-right: 15rpx;
			background-color: rgba(245, 245, 245, 1);
			color: #999999;

			.icon_bz {
				width: 24rpx;
				height: 24rpx;
				margin-right: 5rpx;
			}
		}

		.bqitem {
			display: flex;
			flex-direction: row;
		}

		.lv {
			background-color: rgba(233, 255, 235, 1);
			color: #16B925;
		}

		.chengse {
			background-color: rgba(255, 238, 231, 1);
			color: #F07F4C;
		}

		.bm {
			display: flex;
			flex-direction: row;
			margin-top: 10rpx;

			.bmleft {
				font-weight: 800;
				font-size: 44rpx;
				color: #EA5918;
			}

			.danwei {
				font-weight: bold;
				font-size: 24rpx;
				color: #EA5918;
				position: relative;
				margin-left: 3rpx;
				top: -2rpx;
			}
			.lvtxt{
				color: #16B925;
			}
		}

		.ywxian {
			display: flex;
			padding: 6rpx 15rpx;
			background: #E9FFEB;
			border-radius: 6rpx;
			align-items: center;
			margin-top: 20rpx;

			.icON_bz {
				margin-right: 6rpx;
				width: 24rpx;
				height: 24rpx;
			}

			.jianame {
				font-weight: 500;
				font-size: 24rpx;
				color: #16B925;
			}

			.icon_lvnext {
				width: 20rpx;
				height: 20rpx;
			}
		}
	}

	.dtwo {
		padding: 30rpx;
	}

	.dname {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.dfen {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 20rpx 0 0;

		.dfenitem {
			padding: 8rpx 20rpx;
			background: #EEEEEE;
			border-radius: 4rpx;
			margin-right: 20rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #51565D;
		}

		.gone {
			height: 26rpx;
			margin-right: 20rpx;
			width: 108rpx;
		}

		.dmiao {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}

	.dthree {
		display: flex;
		flex-direction: column;
		padding: 30rpx;

		.sname {
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			display: block;
			margin-bottom: 30rpx;
		}

		.slist {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.sitem {
				width: 50%;
				margin-bottom: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				.ziname {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					min-width: 90rpx;
				}

				.zval {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					display: inline-block;
					margin-left: 8rpx;
				}

				.cha {
					font-weight: 500;
					color: #42ABDC;
				}
			}
		}
	}

	.dfour {
		padding: 20rpx 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;

		.tou {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.dfnav {
			width: 60%;
			display: flex;
			flex-direction: column;

			.dfname {
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #111111;
			}

			.dfmiao {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
		}

		.dfright {
			display: flex;
			margin-left: auto;
			flex-direction: row;
			align-items: center;

			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.icon_next {
				margin-left: 6rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}
	}

	.dfive {
		padding: 20rpx;

		.dcont {
			padding: 20rpx 0;
			border-top: 1rpx solid #eee;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}

}

.titwo {
	background: #FFFFFF;
	border-radius: 24rpx;
	display: flex;
	flex-direction: column;
	padding: 30rpx;
	margin: 24rpx 30rpx 0;

	.anquan {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 30rpx;

		.icon_aq {
			margin-right: 8rpx;
			width: 30rpx;
			height: 30rpx;
		}

		.jubao {
			font-weight: bold;
			font-size: 24rpx;
			color: #999999;
		}

		.icon_nexthui {
			margin-left: 5rpx;
			width: 24rpx;
			height: 24rpx;
		}
	}

	.gname {
		font-weight: bold;
		font-size: 32rpx;
		color: #111111;
		display: block;
		margin-bottom: 30rpx;
	}

	.gnamenew {
		font-weight: bold;
		font-size: 32rpx;
		color: #111111;
		display: block;
	}

	.tishi {
		font-weight: 400;
		font-size: 22rpx;
		color: #666666;
	}

	.renlist {
		display: flex;
		flex-direction: row;
		margin-bottom: 30rpx;

		.rentit {
			display: inline-block;
			width: 130rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
		}

		.renval {
			font-weight: bold;
			font-size: 24rpx;
			color: #111111;
		}

		.lv {
			font-weight: bold;
			font-size: 24rpx;
			color: #16B925;
		}
	}

	.rval {
		display: flex;
		flex-direction: column;

		.sm {
			background: #FFEEE7;
			border-radius: 5rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 5rpx 20rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			margin-top: 9rpx;
		}
	}

	.renlist:last-child {
		margin-bottom: 0;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.ditishi {
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		display: block;
		text-align: center;
		margin-top: 20rpx;
	}

	.dizhi {
		position: relative;
		width: 100%;
		margin-top: 20rpx;
		height: 155rpx;

		.dizhiicon {
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.diitem {
			position: relative;
			padding: 40rpx 30rpx 20rpx 40rpx;
			display: flex;
			flex-direction: row;

			.dileft {
				width: 80%;
				display: flex;
				flex-direction: column;

			}

			.diname {
				max-width: 100%;
				display: block;
				font-weight: bold;
				font-size: 30rpx;
				color: #111111;
			}

			.dimiao {
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				display: block;
				margin-top: 10rpx;
			}

			.chadi {
				margin-left: auto;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.icon_dw {
					width: 28rpx;
					height: 28rpx;
					margin-bottom: 10rpx;
				}

				text {
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
				}
			}
		}

	}

	.bm {
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
		align-items: center;

		.zfabu {
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			display: inline-block;
			margin-right: 20rpx;
		}

		.img_tx {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}

		.xm {
			font-weight: bold;
			font-size: 30rpx;
			color: #111111;
		}

		.xb {
			width: 30rpx;
			height: 30rpx;
			background: #DFFAFF;
			border-radius: 6rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 20rpx;
			color: #3EABFF;
			margin-left: 10rpx;
		}

		.bmleft {
			font-weight: 800;
			font-size: 44rpx;
			color: #EA5918;
		}

		.danwei {
			font-weight: bold;
			font-size: 24rpx;
			color: #EA5918;
		}
	}

	.hpl {
		background: #F5F5F5;
		border-radius: 10rpx;
		display: flex;
		flex-direction: row;
		padding: 25rpx 0;
		margin: 20rpx 0;

		.plitem {
			flex: 1;
			display: flex;
			flex-direction: column;
			border-right: 1rpx solid rgba(204, 204, 204, 1);
			align-items: center;
			justify-content: center;

			.pnum {
				font-weight: bold;
				font-size: 32rpx;
				color: #111111;
			}

			.pname {
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
		}

		.plitem:last-child {
			border-right: none;
		}
	}
}

.newbot {
	display: flex;
	flex-direction: column;
	// height: 200rpx;
	position: fixed;
	bottom: 0;
	width: 100%;
}

.wenxin {
	height: 80rpx;
	background: #FFEEE5;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 30rpx;

	.wentit {
		border-radius: 6rpx;
		background-color: rgba(238, 127, 88, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 54rpx;
		height: 54rpx;
		font-weight: bold;
		font-size: 20rpx;
		color: #FF5142;
		text-align: center;
	}

	.tiwen {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;

		text {
			font-weight: 500;
			font-size: 20rpx;
			color: #EA5918;
		}
	}
}

.yuedu {
	height: 80rpx;
	display: flex;
	padding: 0 30rpx;
	align-items: center;
	background-color: #fff;

	.icon_xz_n {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.xy {
		font-weight: 500;
		font-size: 20rpx;
		color: #999999;
	}

	.xyhu {
		color: rgba(234, 89, 24, 1);
	}
}

.botview {
	height: 120rpx;
	background: #FFFFFF;
	width: 100%;

	display: flex;
	flex-direction: row;
	align-items: center;
	z-index: 10;
	// border-top: 1rpx solid #eee;
	padding: 0 30rpx 20rpx 0;
	.fenview{
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.botleft {
		width: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;

		.icon_fenxiang {
			width: 40rpx;
			height: 40rpx;
			margin-bottom: 5rpx;
		}

		text {
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666;
		}
	}

	.lianxi {
		margin-left: auto;
		width: 75%;
		height: 90rpx;
		background: linear-gradient(90deg, #FF8F39, #FF4D43);
		border-radius: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;

		.lname {
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
		}

		.lmiao {
			font-weight: 500;
			font-size: 20rpx;
			color: #FFFFFF;
		}
	}
	.yibao{
		background: #F5F5F5;
		border-radius: 45rpx;
		font-weight: bold;
		font-size: 28rpx;
		.lname{
			color: #333333;
		}
		
	}

	.liantwo {
		display: flex;
		flex-direction: row;
		flex: 1;

		.qubtn {
			height: 90rpx;
			// width: 200rpx;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #F5F5F5;
			border-radius: 45rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			margin: 0 20rpx;
		}

		.queren {
			background: linear-gradient(90deg, #FF8F39, #FF4D43);
			color: #fff;
			margin-left: auto;
		}
	}
}

.zhanwei {
	height: 20rpx;
	width: 100%;
	background-color: #f6f6f6;
}
.btn{
		position: absolute;
		background-color: transparent;
		width: 100%;
		height: 100%;
		z-index: 1;
		left: 0;
		padding: 0;
		border: none !important;
	}
	/deep/ button::after  {
	border: none;
	
}
.fuview{
	display: flex;
	flex-direction: row;
}
.fuli {
	display: flex;
	padding: 4rpx 20rpx;
	flex-direction: row;
	align-items: center;
	border-radius: 6rpx;
	font-weight: 500;
	font-size: 24rpx;
	margin-right: 15rpx;
	background-color: #ffeee7;
	color: #F07F4C;

	.icon_bz {
		width: 24rpx;
		height: 24rpx;
		margin-right: 5rpx;
	}
}
.yugu{
	color: #EA5918;
	margin-left: auto;
	font-size: 24rpx;
	font-weight: 500;
}
.yuprice{
	color: #EA5918;
	margin-left: auto;
	font-size: 40rpx;
	font-weight: 500;
	position: relative;
	margin-left: 5rpx;
	top: 3rpx;
}
</style>
